<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        html, body{
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        .contain{
            width: 1000px;
            height: 100%;
            margin: 0 auto;
            background-color: #fafafa;
            position: relative;
        }
        .contain>h1{
            margin: 0;
            line-height: 50px;
            font-family: Consolas;
            text-align: center;
        }
        .content-contain{
            width: 960px;
            margin: 0 auto;
            overflow: hidden;
        }
        .content{
            width: 100%;
            height: 3000px;
            background: -webkit-linear-gradient(top, #9cf, #9fc, #f9c, #fc9, #c9f, #cf9);
            position: relative;
        }
        .scroll-bar-contain{
            width: 14px;
            height: 100%;
            border: 1px solid #aaa;
            background-color: #fff;
            border-radius: 7px;
            position: absolute;
            right: 4px;
            top: 50px;
        }
        .scroll-bar{
            display: block;
            width: 6px;
            height: 100px;
            position: absolute;
            top: 0%;
            left: 4px;
            background-color: #fff;
            box-shadow: 0 0 8px 4px #ccc;
            border-radius: 5px;
            /*cursor: pointer;*/
        }
        .scroll-bar:hover{
            width: 10px;
            left: 2px;
            background-color: #aaa;
            box-shadow:none;
        }
        body.down{
            cursor: pointer;
        }
        body.down .scroll-bar{
            cursor: pointer;
            width: 10px;
            left: 2px;
            background-color: #aaa;
            box-shadow:none;
        }
        p{
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="contain" id="contain">
        <h1>scrollBar</h1>
        <div class="content-contain">
            <div class="content">
                 <p>到底</p>
            </div>
        </div>
        <div class="scroll-bar-contain">
            <span class="scroll-bar"></span>
        </div>

    </div>


    <script type="text/javascript">
        (function(){
            var contain = document.querySelector("#contain"),
                content_contain = contain.querySelector(".content-contain"),
                content = content_contain.querySelector(".content"),
                scroll_bar_contain = contain.querySelector(".scroll-bar-contain"),
                scroll_bar = scroll_bar_contain.querySelector(".scroll-bar"),
                height = document.documentElement.clientHeight,
                con_height = height - 50,
                content_height = content.scrollHeight,
                scroll_height = height - 50,
                scroll_bar_height,
                move = {
                    is_down: false,
                    start_top: 0,
                    bar_top: 0,
                    top: 0
                };
            content_contain.style.height = con_height + "px";
            content.style.marginTop = "0px";
            scroll_bar_contain.style.height = scroll_height + "px";
            scroll_bar_height = con_height / content_height * scroll_height;
            scroll_bar.style.height = Math.ceil(scroll_bar_height) + "px";
            scroll_bar.addEventListener("mousedown", function(e){
                document.body.classList.add("down");
                move.is_down = true;
                move.bar_top = scroll_bar.getBoundingClientRect().top;
                move.start_top = e.clientY;
            }, false);
            window.addEventListener("mouseup", function(e){
                document.body.classList.remove("down");
                move.is_down = false;
            }, false);
            window.addEventListener("mousemove", function(e){
                e.preventDefault();
                var mouse_y = e.clientY;
                if(move.is_down && mouse_y > move.start_top - move.bar_top + 50 && mouse_y < height - (scroll_bar_height - (move.start_top - move.bar_top))){
                    var mouse_top = (e.clientY - (move.start_top - move.bar_top) - 50) / scroll_height;
                    move.top = mouse_top;
                    scroll_bar.style.top = move.bar_top - 50 + mouse_y - move.start_top + "px";
                    content_contain.scrollTop = mouse_top * content_height;
                }
            }, false);
            content_contain.addEventListener("mousewheel", function(e){
                var data = e.wheelDelta;
                if(data < 0){
                    if(content_height - con_height - content_contain.scrollTop < 50){
                        content_contain.scrollTop = content_height - con_height;
                    }else{
                        content_contain.scrollTop += 50;
                    }
                }else{
                    if(content_contain.scrollTop < 50){
                        content_contain.scrollTop = 0
                    }else{
                        content_contain.scrollTop -= 50;
                    }
                }
                move.top =  content_contain.scrollTop / content_height;
                scroll_bar.style.top = move.top * scroll_height + "px";
            }, false);
            window.addEventListener("resize", function(e){
                height = document.documentElement.clientHeight;
                con_height = height - 50;
                content_contain.style.height = con_height + "px";
                scroll_height = height - 50;
                scroll_bar_contain.style.height = scroll_height + "px";
                scroll_bar_height = con_height / content_height * scroll_height;
                scroll_bar.style.height = Math.ceil(scroll_bar_height) + "px";
                scroll_bar.style.top = Math.round((content_contain.scrollTop / content_height) * scroll_height) + "px";
            }, false);
        }());

    </script>
</body>
</html>